<template>
  <div class="weatherDialogContainer" v-if="isRecentWeatherShow">
    <div class="weatherDialogTitle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">最近天气</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="weatherDialogContent">
      <template v-if="ybList && ybList.length > 0">
        <div class="yb-list-item" v-for="(item, index) in ybList" :key="index">
          <div class="yb-weather">
            <img
              :src="require(`@/assets/weather/${item.imageName || '00'}.gif`)"
            />
          </div>

          <div class="yb-wind">
            {{ item.type || 0 }}
          </div>
          <div class="yb-temperature">
            {{ (item.low || 0) + "~" + (item.high || 0) }}
          </div>
          
          <div class="yb-day" style="margin-top: 1.5rem">
            {{ item.week }}
          </div>
          <div class="yb-ymd" style="margin-top: 1.5rem">
            {{ item.ymd }}
          </div>
          <!-- <div class="yb-time">{{ item.startTime }}</div> -->
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { queryWeatherForecast } from "@/api/systemTool";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    isRecentWeatherShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
  },
  data() {
    return {
      ybList: [],
    };
  },
  mounted() {
    queryWeatherForecast().then((res) => {
      this.ybList = res.data;
    });
  },
  methods: {
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.weatherDialogContainer {
  width: 30vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -79vw;

  z-index: 2;
  .weatherDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
      .icon {
        margin-right: 1rem;
        font-size: 1.5rem;
        line-height: 1.2rem;
      }
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin: 0 10px;
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .weatherDialogContent {
    height: 15rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #285383;
    .yb-day {
      color: #f3f6f7;
      font-size: 0.9rem;
    }
    .yb-ymd {
      color: #f3f6f7;
      font-size: 0.7rem;
    }
    .yb-wind {
      color: #f3f6f7;
      font-size: 0.9rem;
    }
    /*子项样式*/
    .yb-list-item {
      border-radius: 2px;
      background-color: #1e426b;
      width: 28%;
      height: 90%;
      letter-spacing: 0.1rem;
      display: flex;
      flex-direction: column;
      margin: 0 0.5rem;
      align-items: center;
      justify-content: center;
      /*子项内部元素样式*/
      .yb-time,
      .yb-weather,
      .yb-temperature {
        margin: 0.3rem 0;
        color: #f3f6f7;
        font-size: 0.9rem;
      }
      /*天气样式*/
      .yb-weather {
        width: 2.8rem;
        height: 2.8rem;
      }
      /*天气图标样式*/
      .yb-weather img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .yb-list-item:first-child {
      margin-left: 1rem;
    }
    .yb-list-item:last-child {
      margin-right: 1rem;
    }
  }
}
</style>
